<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>优惠券</title>

		<style>
			html,
			body{
				background-color: #fff;
			}
			.content form{
				padding: 10px 15px;
				background-color: #f0eff3;
				border-bottom: 1px solid #dcdcdc;
			}
			.coupon-id{
				display: block;
				height: 27px;
				width: 90%;
				padding: 0 5%;
				text-align: left;
				font-size: 13px;
				color: #42455c;
				background-color: #fff;
				border: 1px solid #dcdcdc;
				border-radius: 20px;
				outline: none;
			}
			input.coupon-id:-webkit-input-placeholder{
				color: #b4b4b4;
				font-size: 13px;
			}
			/*ul*/
			.content ul{
				margin-top: 15px;
				padding: 0 15px;
			}
			.content ul li{
				border: none;
				border-radius: 4px;
				overflow: hidden;
				margin-bottom: 10px;
			}
			li.new{
				background-color: #fab345;
			}
			li.share{
				background-color: #b4b4b4;
			}
			.content ul li .left,
			.content ul li .right{
				
			}
			.content ul li .left{
				float: left;
				border-right: 3px dotted #fff;
				color: #fff;
				font-size: 0;
				font-weight: 600;
				padding: 26px 10px;
			}
			.money-icon{
				font-size: 14px;
				margin-right: 5px;
			}
			.money{
				font-size: 18px;
			}
			.content ul li .right{
				position: relative;
				float: left;
				color: #fff;
				font-family: "Hiragino Sans GB W6";
				padding: 11px 10px;
				width: 70%;
			}
			.r-title{
				font-weight: 600;
				font-size: 16px;
				margin-bottom: 5px;
			}
			.r-date,
			.r-sub{
				font-size: 13px;
			}
			a.used{
				position: absolute;
				top: 10px;
				right: 0;
				border: 1px solid #dcdcdc;
				border-radius: 4px;
				padding: 3px 5px;
				color: #dcdcdc;
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<form class="" action="">
				<input class="coupon-id" type="text" name="" placeholder="请输入优惠码">
			</form>
			<ul>
				<li class="new">
					<div class="left">
						<span class="money-icon">¥</span>
						<span class="money">15</span>
					</div>
					<div class="right">
						<p class="r-title">新人礼券 下载APP</p>
						<p class="r-date">有效期至：<span>2015-07-19</span></p>
						<p class="r-sub">满100元可用</p>
						<!-- <a class="used" href="#">已使用</a> -->
					</div>
				</li>
				<li class="share">
					<div class="left">
						<span class="money-icon">¥</span>
						<span class="money">15</span>
					</div>
					<div class="right">
						<p class="r-title">分享有礼</p>
						<p class="r-date">有效期至：<span>2015-07-19</span></p>
						<p class="r-sub">满100元可用</p>
						<a class="used" href="#">已使用</a>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>